<template>
  <div class="h-screen overflow-hidden bg-gradient-to-br from-gray-900 via-blue-950 to-gray-900 text-white">
    <div class="h-full overflow-y-auto thin-scrollbar px-6 py-8">
      <!-- 标题区域 -->
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 space-y-4 md:space-y-0">
        <div>
          <h1 class="text-3xl font-bold text-white">数据可视化大屏</h1>
          <p class="text-blue-300 mt-2">全方位数据分析与可视化平台</p>
        </div>
        <div class="flex flex-col items-end">
          <div class="text-xl text-white mb-2">{{ currentTime }}</div>
          <button
            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-300 flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
            </svg>
            <span @click="updateScreenPreferences('null')" v-if="isFullScreen">退出全屏</span>
            <span @click="updateScreenPreferences('full')" v-else>全屏显示</span>
          </button>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="flex-1 overflow-y-auto thin-scrollbar">
        <!-- 功能介绍卡片 -->
        <div :class="['grid', 'grid-cols-1', 'gap-6', 'mb-8', 
          visibleCardCount === 1 ? 'md:grid-cols-1' : 
          visibleCardCount === 2 ? 'md:grid-cols-2' : 
          'md:grid-cols-2 lg:grid-cols-3']">
          <!-- 小程序统计 -->
          <div v-if="hasAccessByCodes(['system:xiaochengxu:query'])" @click="goTo('wxMiniProgram')"
            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-white shadow-2xl border border-white/20 hover:bg-white/15 transition-all duration-300 cursor-pointer">
            <div class="text-center">
              <div
                class="w-12 h-12 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd"
                    d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm1 0v12h12V4H4z"
                    clip-rule="evenodd" />
                </svg>
              </div>
              <h3 class="text-lg font-bold mb-2">京彩E家人小程序数据分析</h3>
              <p class="text-blue-200 text-sm leading-relaxed">
                查看小程序用户行为数据和核心业务指标，助力业务增长决策
              </p>
            </div>
          </div>

          <!-- APP统计A -->
          <div v-if="hasAccessByCodes(['system:dapingA:query'])" @click="goTo('appA')"
            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-white shadow-2xl border border-white/20 hover:bg-white/15 transition-all duration-300 cursor-pointer">
            <div class="text-center">
              <div
                class="w-12 h-12 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                </svg>
              </div>
              <h3 class="text-lg font-bold mb-2">京彩E家人客户端数据统计A</h3>
              <p class="text-purple-200 text-sm leading-relaxed">
                查看APP用户画像和生命周期数据，优化产品功能和用户体验
              </p>
            </div>
          </div>

          <!-- APP统计B -->
          <div v-if="hasAccessByCodes(['system:dapingB:query'])" @click="goTo('appB')"
            class="bg-white/10 backdrop-blur-sm rounded-xl p-6 text-white shadow-2xl border border-white/20 hover:bg-white/15 transition-all duration-300 cursor-pointer">
            <div class="text-center">
              <div
                class="w-12 h-12 bg-gradient-to-r from-green-400 to-green-600 rounded-full flex items-center justify-center mx-auto mb-3">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                  <path
                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              <h3 class="text-lg font-bold mb-2">京彩E家人客户端数据统计B</h3>
              <p class="text-green-200 text-sm leading-relaxed">
                查看多维度数据可视化和实时图表，让数据洞察一目了然
              </p>
            </div>
          </div>
        </div>

        <!-- 平台优势部分 -->
        <div class="mb-8">
          <h2 class="text-2xl font-bold text-white mb-6 text-center">平台优势</h2>
          <div :class="['grid', 'grid-cols-1', 'gap-6', 
            advantageCount <= 2 ? 'md:grid-cols-2' : 
            'md:grid-cols-2 lg:grid-cols-4']">
            <!-- 实时数据 -->
            <div
              class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
              <div class="flex flex-col items-center text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-full flex items-center justify-center mb-4 shadow-lg">
                  <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">实时数据</h3>
                <p class="text-gray-300 text-sm leading-relaxed">提供即时的数据更新和分析，确保决策基于最新信息，支持业务快速响应市场变化。</p>
              </div>
            </div>

            <!-- 多维分析 -->
            <div
              class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
              <div class="flex flex-col items-center text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-r from-purple-400 to-purple-600 rounded-full flex items-center justify-center mb-4 shadow-lg">
                  <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">多维分析</h3>
                <p class="text-gray-300 text-sm leading-relaxed">从多个角度和维度分析数据，发现隐藏的模式和趋势，为战略决策提供科学依据。</p>
              </div>
            </div>

            <!-- 可视化图表 -->
            <div
              class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
              <div class="flex flex-col items-center text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-r from-green-400 to-green-600 rounded-full flex items-center justify-center mb-4 shadow-lg">
                  <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">可视化图表</h3>
                <p class="text-gray-300 text-sm leading-relaxed">通过直观的图表和仪表盘，让复杂数据变得易于理解，提升数据解读效率。</p>
              </div>
            </div>

            <!-- 安全可靠 -->
            <div
              class="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10 hover:bg-white/10 transition-all duration-300">
              <div class="flex flex-col items-center text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-r from-red-400 to-red-600 rounded-full flex items-center justify-center mb-4 shadow-lg">
                  <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-white mb-3">安全可靠</h3>
                <p class="text-gray-300 text-sm leading-relaxed">数据加密存储和传输，确保信息安全和系统稳定性，保障企业数据资产安全。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 页脚版权信息 -->
        <div class="mt-12 text-center text-gray-400 text-sm">
          <p>© 2024 京彩E家人 | 内部数据可视化解决方案</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { updatePreferences } from '@vben/preferences';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useAccess } from '@vben/access';

let router = useRouter();
const { hasAccessByCodes } = useAccess();

// 当前时间显示
const currentTime = ref('');
// 全屏状态
const isFullScreen = ref(false);

// 计算可见功能卡片数量
const visibleCardCount = computed(() => {
  let count = 0;
  if (hasAccessByCodes(['system:xiaochengxu:query'])) count++;
  if (hasAccessByCodes(['system:dapingA:query'])) count++;
  if (hasAccessByCodes(['system:dapingB:query'])) count++;
  return count;
});

// 计算平台优势卡片数量
const advantageCount = ref(4); // 默认显示4个优势卡片

// 可以根据需要动态设置优势卡片数量
const updateAdvantageCount = (count: number) => {
  advantageCount.value = count;
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 导航方法
const goTo = (type: string) => {
  if (type === "wxMiniProgram") return router.push('wxMiniProgram');
  if (type === "appA") return router.push('appA');
  if (type === "appB") return router.push('appB');
};

// 检测平台优势卡片数量
const checkAdvantageCards = () => {
  // 这里可以根据实际情况动态检测平台优势卡片数量
  // 例如通过DOM查询或其他逻辑判断
  // 这里简化为根据窗口宽度判断
  const width = window.innerWidth;
  if (width < 768) { // 移动设备
    updateAdvantageCount(2);
  } else if (width < 1024) { // 平板设备
    updateAdvantageCount(2);
  } else { // 桌面设备
    updateAdvantageCount(4);
  }
};

// 监听窗口大小变化
const setupResizeListener = () => {
  window.addEventListener('resize', checkAdvantageCards);
};

// 组件挂载时开始更新时间
onMounted(async () => {
  updateTime();
  // 每秒更新一次时间
  setInterval(updateTime, 1000);
  await updateScreenPreferences('full');
  
  // 检测平台优势卡片数量
  checkAdvantageCards();
  // 设置窗口大小变化监听
  setupResizeListener();
});

// 组件卸载时清除事件监听
onUnmounted(() => {
  window.removeEventListener('resize', checkAdvantageCards);
});

// 页面配置方法
const updateScreenPreferences = async (mode?: string) => {
  console.log(mode, "updateScreenPreferences");
  isFullScreen.value = !isFullScreen.value
  return updatePreferences({
    app: { layout: mode === 'full' ? 'full-content' : 'sidebar-nav' },
    header: { enable: mode !== 'full' },
    sidebar: { collapsed: mode === 'full' },
    tabbar: { enable: false },
  });
};
</script>

<style scoped>
/* 自定义滚动条样式 */
.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 3px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.7);
}
</style>
